<!--
 * @Descripttion:
 * @version:
 * @Editor: E-CHOOSEUS R&D
 * @LastEditors: E-CHOOSEUS R&D
-->
<template>
  <div class="TCMNursingDialectical">
    <div class="symptom">
      <div class="item">
        主症：
        <input v-model="pageData.mainSymptoms" class="inputBox" />
      </div>
      <div class="item">
        舌苔脉象：
        <input v-model="pageData.tonguePulse" class="inputBox" />
      </div>
    </div>
    <div class="formTitle">
      <TableHeaderRow :columns="columns" />
    </div>
    <div
      v-for="(item0, index0) in pageData.tableData"
      :key="idx + '_' + index0"
    >
      <div
        v-for="(item1, index1) in item0"
        :key="idx + '_' + index1"
        class="formItem"
      >
        <div
          v-for="(item2, index2) in columnsLeaf"
          :key="idx + '_' + index2"
          class="cell"
          :style="{
            width: item2.width,
            flexShrink: item2.width ? 0 : 1,
            borderTop:
              ['dialectical', 'operator'].includes(item2.key) && index1 > 0
                ? 'none'
                : '1px solid #000'
          }"
        >
          <template v-if="item2.key === 'date'">
            <DatePicker
              v-model="item1[item2.key]"
              class="txt-c"
              select-interval
              value-format="timestamp"
              format="yyyy-MM-dd"
            />
          </template>
          <template v-else-if="item2.key === 'pgTime'">
            <DatePicker
              v-model="item1[item2.key]"
              class="txt-c"
              select-interval
              value-format="timestamp"
              format="yyyy-MM-dd"
            />
          </template>
          <template v-else-if="item2.key === 'timePoint'">
            <DateSelection
              v-model="item1[item2.key]"
              class="txt-c"
              style="
                width: 100%;
                height: 100%;
                padding: 0;
                justify-content: center;
                background: transparent;
              "
              value-format="HH:mm"
              :simple-op="true"
              :date-picker-show="false"
              :has-border="false"
              :display-num="!item1[item2.key]"
              :need-time-icon="false"
              :noClear="true"
            />
          </template>
          <template v-else-if="['dialectical', 'operator'].includes(item2.key)">
            <el-input
              v-if="index1 === 0"
              v-model="item1[item2.key]"
              type="textarea"
              resize="none"
              class="inputBox textarea"
              :class="{ 'txt-c': ['operator'].includes(item2.key) }"
            />
          </template>
          <template v-else>
            <input v-model="item1[item2.key]" class="inputBox txt-c" />
          </template>
        </div>
      </div>
    </div>
    <div class="bottomBox">
      <div class="flexBox">
        <div>
          总体满意度：
          <el-checkbox
            v-for="(item, index) in satisfactionOptions"
            :key="index"
            :label="item.value"
            :value="item.value === pageData.satisfaction"
            @change="e => handleCheckboxChange(e, item.value)"
            >{{ item.label }}</el-checkbox
          >
        </div>
        <div>{{ hospitalName }} 护理部</div>
      </div>
      <div style="margin-top: 2px">
        护理效果评价：详见中医护理方案量化评分表
      </div>
    </div>
  </div>
</template>
<script>
import { format } from 'date-fns'
import { cloneDeep } from 'lodash-unified'
import {
  computed,
  defineComponent,
  nextTick,
  reactive,
  toRefs,
  watch
} from 'vue'

import DateSelection from '@/components/DateSelection/indexV2.vue'
import DatePicker from '@/components/MyComp/DatePicker.vue'
import {
  getElementFnFromInstance,
  getStoreFromInstance
} from '@/utils/instance'
import TimePicker from '@/views/homeNew/components/TimePicker.vue'

import { baseData, columns, satisfactionOptions } from './baseData'
import TableHeaderRow from './tableHeaderRow.vue'

export default defineComponent({
  components: {
    DatePicker,
    TimePicker,
    DateSelection,
    TableHeaderRow
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    formType: {
      type: String,
      default: 'add'
    },
    type: {
      type: String,
      default: ''
    },
    idx: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: ''
    }
  },
  emits: ['update'],
  setup(props, { emit }) {
    const state = reactive({
      hospitalName: window.hospitalName,
      pageData: {
        mainSymptoms: '',
        tonguePulse: '',
        tableData: [],
        satisfaction: ''
      },
      columns,
      columnsLeaf: [],
      satisfactionOptions
    })

    const store = getStoreFromInstance()
    const { $confirm, $message } = getElementFnFromInstance()

    const patCur = computed(() => store.getters.patCur)

    function initData() {
      if (props.data.jsonText && props.data.jsonText !== '{}') {
        const jsonText = JSON.parse(props.data.jsonText)
        state.pageData = Object.assign(baseData(), jsonText)
      } else {
        nextTick(() => {
          state.pageData = baseData()
        })
      }
    }

    function getParams() {
      return state.pageData
    }

    function getColumnsLeaf(list) {
      list.forEach(v => {
        if (v.children && v.children.length > 0) {
          getColumnsLeaf(v.children)
        } else {
          state.columnsLeaf.push(cloneDeep(v))
        }
      })
    }

    function handleCheckboxChange(e, value) {
      console.log(e)
      state.pageData.satisfaction = ''
      if (e) {
        state.pageData.satisfaction = value
      }
      console.log(state.pageData.satisfaction)
    }

    watch(
      () => props.data,
      () => {
        initData()
      },
      { immediate: true }
    )

    getColumnsLeaf(state.columns)

    return {
      ...toRefs(state),
      getParams,
      handleCheckboxChange
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';

.TCMNursingDialectical {
  position: relative;
  border: 1px solid #000;
  border-top: none;
  border-left: none;
  margin: 10px auto 0;

  .symptom {
    display: flex;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    padding: 4px;

    .item {
      flex: 1;
      display: flex;
      align-items: center;
      white-space: nowrap;
    }
  }

  .formTitle {
    border-left: 1px solid #000;
  }

  .formItem {
    display: flex;
    position: relative;
    // border-top: 1px solid #000;
    .cell {
      position: relative;
      height: 28px;
      width: 100%;
      padding: 0 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-left: 1px solid #000;
    }

    .del {
      position: absolute;
      top: 10px;
      right: 0;
      width: 15px;
      height: 15px;
      font-size: 15px;
      color: #f56c6c;
      display: none;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    &:hover {
      .del {
        display: flex;
      }
    }
  }

  .txt {
    &-c {
      text-align: center;
    }
  }

  .inputBox {
    border: none;
    background-color: rgba($color: #000, $alpha: 0%);
    outline: none;
    width: 100%;
    line-height: 1;

    &.textarea {
      position: absolute;
      top: 0;
      left: 1px;
      padding: 1px 0;
      width: calc(100% - 1px);
      height: 190px;
      // background: #fff;
      z-index: 1;
    }
  }

  ::v-deep .txt-c {
    text-align: center;

    .el-input__inner,
    .el-textarea__inner {
      text-align: center;
    }
  }

  .bottomBox {
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    padding: 4px;
    font-weight: bold;

    .flexBox {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}

::v-deep {
  .el-date-editor {
    width: 100%;

    .el-input__inner {
      font-size: 14px;
    }

    .el-input__suffix {
      right: -8px;
      display: inline-block;

      .el-input__icon {
        line-height: 18px;
      }
    }
  }

  .el-textarea__inner {
    display: block;
    border: none;
    padding: 2px 4px;
    height: 100%;
    width: 100%;
    line-height: 1.5;
    font-size: 13px;
    color: #000;
    background: #fff;
  }

  .error {
    color: #f56c6c;

    .el-input__inner {
      color: #f56c6c;
    }
  }

  .el-input.is-disabled .el-input__inner {
    background-color: #fff;
  }

  .DateSelV2.disabled {
    background-color: #fff;
    border-color: transparent;
    color: #000;
  }

  input:disabled {
    color: #000;
    background: #fff;
  }
}
</style>
